<script setup lang="ts">
import { useAttrs } from "vue";
import type {
  PureTablePlusEmits,
  PureTablePlusProps
} from "./usePureTablePlus";
import { usePureTablePlus } from "./usePureTablePlus";

const props = defineProps<PureTablePlusProps>();

const emit = defineEmits<PureTablePlusEmits>();

const attrs = useAttrs();

const {
  internalSearch,
  internalPageSize,
  internalCurrentPage,
  sortProp,
  sortOrder,
  tableHeight,
  normalizedColumns,
  pageSizesComputed,
  searchedData,
  pagedData,
  onSortChange,
  onFilterChange,
  onPageSizeChange,
  onCurrentPageChange
} = usePureTablePlus(props, emit);
</script>

<template>
  <div class="w-full">
    <div>
      <el-input
        v-if="searchProp"
        v-model="internalSearch"
        class="max-w-3xs"
        clearable
        size="small"
        :placeholder="searchPlaceholder || '搜索'"
      />
    </div>

    <pure-table
      :data="pagedData"
      :columns="normalizedColumns"
      :default-sort="{ prop: sortProp, order: sortOrder }"
      :height="tableHeight"
      v-bind="attrs"
      @sort-change="onSortChange"
      @filter-change="onFilterChange"
    />

    <div class="flex justify-end py-2">
      <el-pagination
        v-if="searchedData.length > 0"
        :page-sizes="pageSizesComputed"
        :total="searchedData.length"
        layout="total, prev, pager, next, sizes, jumper"
        size="small"
        background
        :page-size="internalPageSize"
        :current-page="internalCurrentPage"
        @size-change="onPageSizeChange"
        @current-change="onCurrentPageChange"
      />
    </div>
  </div>
</template>
